<template>
	<view class="">
		<view class="JFxinxi">
			<view class="iconfont icon-icon_right correct"></view>
			<view class="succeed">缴费成功</view>
		</view>
		<jiaofeiZJ></jiaofeiZJ>
		<view class="inDetail">
			<view class="rental">
				<text class="text1">订单总额</text>
				<text class="text2">600.00元</text>
			</view>
			<view class="cutOffRule"></view>
			<view class="number">
				<text class="text1">订单编号</text>
				<text class="text2">202010090900001</text>
			</view>
			<view class="cutOffRule"></view>
			<view class="times">
				<text class="text1">订单时间</text>
				<text class="text2">2020/10/09 09:00:00</text>
			</view>
			<view class="cutOffRule"></view>
			<view class="states">
				<text class="text1">订单状态</text>
				<text class="text2">已支付</text>
			</view>
		</view>
	</view>

</template>

<script setup>
	import jiaofeiZJ from '~@/components/feng/jiaofeiZJ/jiaofeiZJ.vue'
</script>

<style lang="scss">
	.cutOffRule {
		border: 1px solid #f2f2f2;
		margin: 0 20rpx;
	}

	.inDetail {
		margin: 0 36rpx;
		background-color: #fff;
		margin-bottom: 50rpx;

		.rental {
			height: 100rpx;
			line-height: 100rpx;

			.text1 {
				margin: 0 16rpx;
				color: #c0c0c0;
			}

			.text2 {
				color: #f66363;
			}
		}

		.number {
			height: 100rpx;
			line-height: 100rpx;

			.text1 {
				color: #c0c0c0;
				margin: 0 16rpx;
			}

			.text2 {
				color: #756d89;
			}
		}

		.times {
			height: 100rpx;
			line-height: 100rpx;

			.text1 {
				color: #c0c0c0;
				margin: 0 16rpx;
			}

			.text2 {
				color: #756d89;
			}
		}

		.states {
			height: 100rpx;
			line-height: 100rpx;
			box-sizing: border-box;

			.text1 {
				color: #c0c0c0;
				margin: 0 16rpx;
			}

			.text2 {
				color: #756d89;
			}
		}
	}

	.JFxinxi {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 36rpx;
		margin-top: 100rpx;

		.correct {
			border: 5px solid #006eff;
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 70rpx;
			color: #006eff;
			font-size: 45rpx;
		}

		.succeed {
			margin-top: 25rpx;
			font-size: 30rpx;
		}
	}
</style>
